<template>
  <el-dialog
      @close="$emit('update:visible', false)"
      class="moreUser"
      @open="open"
      title="Customize your purchase plan"
      :visible.sync="dialogVisible"
      width="25%">
    <el-row class="moreUser-content">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="Assets">
        </el-table-column>
        <el-table-column
            prop="number"
            label="Extra Users">
          <template slot-scope="{ row }">
            <el-input-number :min="0" v-model="row.number" size="small"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <PayConsumer component="el-button"
                   size="mini"
                   class="w-full "
                   type="primary"
                   :edit="true"
                   :isMoreUser="true"
                   :disabled="!$hasPermission('pay:payment') || !disableNext"
                   :before-payment="beforePayment"
                   :catch-error-payment="catchErrorPayment"
                   @success="success">
        {{$t('paywall.next')}}
      </PayConsumer>
    </span>
  </el-dialog>
</template>

<script>
import PayConsumer from '@/components/storybook/s-pay/pay-consumer'
export default {
  name: 'aLaCarteMoreUser',
  props: ['visible', 'aLaCarte'],
  components: {
    PayConsumer
  },
  data () {
    return {
      dialogVisible: false,
      tableData: []
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val
    }
  },
  computed: {
    disableNext () {
      let count = 0
      if (this.tableData && this.tableData.length > 0) {
        this.tableData.map(item => {
          count = count + (item.number || 0)
        })
      }
      return Boolean(count)
    },
    subscriptionId () {
      return this.tableData.length > 0 ? this.tableData[0].subscriptionId : ''
    }
  },
  methods: {
    open () {
      const arr = this._.filter(this.aLaCarte, item => {
        item.number = 0
        return item.type !== 2 && item.name !== 'BrightGauge Price Matching'
      })
      this.tableData = this._.cloneDeep(arr)
    },
    async catchErrorPayment (subscriptionId) {
    },
    async beforePayment () {
      const bundleOther = this._.find(this.tableData[0].subscriptionItem, { item_type: 'plan' })
      const addonsDtoList = this.tableData.filter(item => {
        return item.number > 0
      }).map(item => {
        return {
          id: item.itemId,
          quantity: (item.usersLimit + item.number) * ( item.botValue || 1),
          unitPrice: this._.find(item.subscriptionItem, { item_price_id: item.itemId}).unit_price
        }
      })
      return {
        subscriptionId: this.subscriptionId,
        planId: bundleOther.item_price_id,
        addonsDtoList: addonsDtoList
      }
    },
    async success () {
      const { saveAlaCarteUser } = this.$interface.pay
      const params = this.tableData.filter(item => {
        return item.number > 0
      }).map(item => {
        return {
          appId: item.appId,
          subscriptionId: item.subscriptionId,
          usersLimit: item.usersLimit + item.number
        }
      })
      let { data: response } = await saveAlaCarteUser(params)
      if (response.code !== 0) {
        throw response.msg
      }
      return response
    }
  }
}
</script>

<style scoped lang="scss">
.moreUser{
  &-content {
    .el-col {
      height: 40px;
      display: flex;
      align-items: center;
    }
    .flex-end {
      justify-content: flex-end;
    }
  }
  .el-input-number{
    line-height: 30px;
  }
}
</style>
